<template>
  <!-- 导航栏 -->
  <div :class="{ nav: !isfixed, headfixed: isfixed }">
    <div class="head_container">
      <div style="padding-left: 40px; padding-top: 6px">
        <h1>
          <router-link to="/"
            ><img src="@/assets/Homepage_desktop/Logo.png" alt=""
          /></router-link>
        </h1>
      </div>
      <!-- 导航内容 -->
      <ul class="header-nav-wrapper">
        <li
          v-for="(item, index) in navList"
          :key="index"
          :class="index == navIndex ? 'active' : ''"
          @click="navClick(index, item.name)"
        >
          <router-link :to="item.path" @click="handleLast(item)">
            {{ item.name }}
            <span
              v-if="item.children.length > 0"
              class="glyphicon el-icon-arrow-down"
            ></span>
            <i class="underline"></i>
          </router-link>
          <dl v-if="item.children.length > 0">
            <dt v-for="(i, n) in item.children" :key="n">
              <router-link :to="i.path">{{ i.name }}</router-link>
            </dt>
          </dl>
        </li>
        <li>
          <a href="http://dh.51ch.cc">全球社交流量导航 </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "headerview",
  data() {
    return {
      isfixed: false,
      navIndex: 0,
      navList: [
        {
          name: "首页",
          path: "/",
          children: [],
        },
        {
          name: "产品",
          path: "",
          children: [
            {
              name: "Whatsapp拓客系统",
              path: "/whatsapp",
            },
            {
              name: "Facebook拓客系统",
              path: "/tauch",
            },
            {
              name: "51客服系统",
              path: "/customer",
            },
          ],
        },
        {
          name: "海外引流推广",
          path: "/overseas",
          children: [],
        },
        {
          name: "出海资讯",
          path: "",
          children: [
            {
              name: "WhatsApp",
              path: "/articles",
            },
          ],
        },
        {
          name: "联系我们",
          path: "/we",
          children: [],
        },
      ],
    };
  },
  watch: {
    //1. 侦听器：监听路由是否发生了变化。（头部的导航组件只会加载一次，所以换个思路，在任何组件中都可以侦听路由是否变化）
    $route: function (val, old) {
      switch (val.path) {
        case "/":
          this.navIndex = 0;
          sessionStorage.setItem("navIndex", 0);
          break;
        case "/whatsapp":
          this.navIndex = 1;
          sessionStorage.setItem("navIndex", 1);
          break;
        case "/tauch":
          this.navIndex = 1;
          sessionStorage.setItem("navIndex", 1);
          break;
        case "/customer":
          this.navIndex = 1;
          sessionStorage.setItem("navIndex", 1);
          break;
        case "/overseas":
          this.navIndex = 2;
          sessionStorage.setItem("navIndex", 2);
          break;
        case "/articles":
          this.navIndex = 3; //如果是子路由（children里面的），也按它父级的下标来，比如/articles，父级是3
          sessionStorage.setItem("navIndex", 3);
          break;
          case "/we":
          this.navIndex = 4;
          sessionStorage.setItem("navIndex", 4);
          break;
        default:
          this.navIndex = 0;
          sessionStorage.setItem("navIndex", 0);
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.watchScroll);
  },
  methods: {
    watchScroll() {
      var sctop = document.documentElement.scrollTop || document.body.scrollTop;
      //防抖操作 或者 使用animate.css
      if (sctop > 60) {
        this.isfixed = true;
      } else {
        this.isfixed = false;
      }
    },
    navClick(index, name) {
      this.navIndex = index;
      sessionStorage.setItem("navIndex", index);
      this.menuName = name;
    },
    handleLast(v) {
      // console.log(v, 9978798798);
    },
  },
};
</script>

<style scoped>
.head_container {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.headfixed {
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3) !important;
  animation: headscroll 0.8s alternate;
  animation-fill-mode: forwards;
}

@keyframes headscroll {
  0% {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    opacity: 0;
  }

  100% {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    opacity: 1;
  }
}

.nav_list > span > a {
  color: #212c48;
}

.nav_warp .nav_list {
  margin-left: 70px;
  margin-top: 20px;
}

.nav_warp {
  max-width: 1160px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-content: center;
  text-align: center;
}

.nav_warp {
  max-width: 1160px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-content: center;
  text-align: center;
  justify-content: right;
  margin-right: 20px;
  padding-top: 6px;
}

.nav {
  height: 60px;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

/* 导航栏 导航容器 */
.header-nav-wrapper {
  line-height: 50px;
}

.header-nav-wrapper {
  margin: 0;
  max-width: 800px;
}

/* 导航栏 每个导航 */
.header-nav-wrapper > li {
  float: left;
  margin: 0 25px;
  position: relative;
}

/* 导航栏 每个导航下面的 a 链接 */
.header-nav-wrapper > li > a {
  color: #313b57;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 0;
  position: relative;
}

/* 导航栏 每个导航下面的 a 链接的下划线 */
.header-nav-wrapper > li > a > i {
  display: block;
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  opacity: 0;
  transition: all 0.6s ease;
  background-color: #077af1;
}

/* 导航栏 每个导航下面的 a 链接的右侧小三角 */
.header-nav-wrapper > li > a > span {
  font-size: 14px;
  transition: transform ease 0.5s;
}

/* 导航栏 每个导航下面的 a 链接 鼠标滑上去的样式 */
.header-nav-wrapper > li > a:hover {
  color: #313b57;
  text-decoration: none;
}

/* 导航栏 每个导航下面的 a 链接 鼠标滑上去下划线的样式 */
.header-nav-wrapper > li > a:hover .underline {
  opacity: 1;
  width: 100%;
  left: 0;
}

/* 导航栏 每个导航下面的 a 链接 鼠标滑上去三角标的样式 */
.header-nav-wrapper > li > a:hover span {
  transform: rotate(180deg);
}

/* 导航栏 每个导航下面的 a 链接 鼠标点击后的样式 */
.header-nav-wrapper > li.active > a {
  color: #077af1;
  text-decoration: none;
  border-bottom: 2px solid #077af1;
}

/* 导航栏 每个导航下面的二级导航容器 */
.header-nav-wrapper > li > dl {
  display: none;
  position: absolute;
  width: 168px;
  top: 85%;
  left: 0;
  z-index: 999999;
  box-shadow: 0 0 3px 1px #ccc;
  background: #fff;
}

/* 导航栏 每个导航下面的二级导航容器的每个导航 */
.header-nav-wrapper > li > dl > dt {
  padding: 10px;
  line-height: 30px;
}

.header-nav-wrapper > li > dl > dt > a {
  color: #313b57;
}

/* 导航栏 每个导航下面的二级导航容器的每个导航 当鼠标滑上时的样式*/
.header-nav-wrapper > li > dl > dt > a:hover {
  text-decoration: none;
}

/* 导航栏 滑上一级导航显示二级导航 */
.header-nav-wrapper > li:hover dl {
  display: block;
}

.header-nav-wrapper > li > dl > dt:hover {
  cursor: pointer;
  background: #077af1;
}
.header-nav-wrapper > li > dl > dt:hover > a {
  color: #fff;
}
</style>
